let highlight = [];
//PDFJS.disableWorker = true;
function clearHighlight(){
	highlight = [];
}
function bindHighlighter(pageNum){
	// console.log('highlight' + pageNum);
	const displayLayer = document.getElementById('page'+pageNum);
	let canvas = document.createElement('canvas');
	// console.log(pageNum + '->' + displayLayer);
	displayLayer.parentNode.appendChild(canvas);
	canvas.style.position = 'absolute';
	canvas.style.top = '0';
	canvas.width = displayLayer.width;
	canvas.height = displayLayer.height;
	canvas.style.cursor = 'pointer';
	let context = canvas.getContext('2d');
	context.lineWidth = 14;
	//context.lineJoin = 'round';
	// console.log(pageNum + '-> load previous');
	if(highlight[pageNum]){
		let img = new Image();
		img.src = highlight[pageNum];
		// console.log(pageNum + '-> draw previous');
		context.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
	}
	// console.log(pageNum + '-> bind listener');
	canvas.onmousedown = function (ev) {
		// console.log('down');
		context.strokeStyle = getComputedStyle(parent.document.getElementById('highlighter'))
							.color.replace('rgb','rgba').replace(')',',0.5)');
		let x = ev.layerX;
		let y = ev.layerY;
		canvas.onmousemove = function (ev) {
			context.beginPath();
			context.moveTo(x,y);
			x = ev.layerX;
			y = ev.layerY;
			context.lineTo(x, y);
			//context.closePath();
			context.stroke();
		};
		document.onmouseup = function () {
			canvas.onmousemove = null;
			document.onmouseup = null;
			highlight[pageNum] = canvas.toDataURL('image/webp');
			// console.log('up');
		};
	};
	
}
